<template>
  <div class="preview">
    <!-- 基本信息 -->
    <el-divider content-position="left" class="divider">基本信息</el-divider>
    <el-form class="baseBox">
      <el-form-item label="所属分类" :label-width="formLabelWidth">
        <el-input :disabled="true" v-model="baseForm.categoryName"></el-input>
      </el-form-item>
      <el-form-item label="商品名称" :label-width="formLabelWidth">
        <el-input :disabled="true" v-model="baseForm.name"></el-input>
      </el-form-item>
      <el-form-item label="商品标题" :label-width="formLabelWidth">
        <el-input :disabled="true" v-model="baseForm.title"></el-input>
      </el-form-item>
      <el-form-item
        label="商品价格"
        :label-width="formLabelWidth"
        v-if="!skuForm.hasSaleAttrs"
      >
        <el-input disabled v-model="skuForm.skuList[0].price">
          <template slot="append">元</template>
        </el-input>
      </el-form-item>
      <el-form-item
        label="商品库存"
        :label-width="formLabelWidth"
        v-if="!skuForm.hasSaleAttrs"
      >
        <el-input disabled v-model="skuForm.skuList[0].stockNum"></el-input>
      </el-form-item>
    </el-form>
    <!-- 图片信息 -->
    <el-divider
      v-if="imageForm.images && imageForm.images.length > 0"
      content-position="left"
      class="divider"
      >图片信息</el-divider
    >
    <ul
      class="imageBox el-upload-list el-upload-list--picture-card"
      v-if="imageForm.images && imageForm.images.length > 0"
    >
      <li
        class="el-upload-list__item is-success"
        v-for="(item, index) in imageForm.images"
        :key="index"
      >
        <img :src="item.url" class="el-upload-list__item-thumbnail" />
      </li>
    </ul>
    <!-- 规格参数 -->
    <el-divider
      v-if="attrForm.groupAttrs && attrForm.groupAttrs.length > 0"
      content-position="left"
      class="divider"
      >规格参数</el-divider
    >
    <table class="attrBox">
      <tbody
        v-for="(group, groupIndex) in attrForm.groupAttrs"
        :key="groupIndex"
      >
        <tr>
          <td :rowspan="group.attrs.length" class="group">
            {{ group.name }}
          </td>
          <td>
            {{ group.attrs[0].name }}
          </td>
          <td>
            {{ group.attrs[0].value }}
          </td>
        </tr>
        <tr v-for="(attr, attrIndex) in group.attrs.slice(1)" :key="attrIndex">
          <td>
            {{ attr.name }}
          </td>
          <td>
            {{ attr.value }}
          </td>
        </tr>
      </tbody>
    </table>
    <!-- sku信息 -->
    <el-divider
      v-if="skuForm.hasSaleAttrs"
      content-position="left"
      class="divider"
      >sku信息</el-divider
    >
    <el-form class="skuBox">
      <el-table
        class="skuTableBox"
        border=""
        :data="skuForm.skuList"
        style="width: 100%"
        :span-method="arraySpanMethod"
        :cell-class-name="tableCellClassName"
        v-if="skuForm.hasSaleAttrs"
      >
        <el-table-column prop="skuAttrList" label="销售版本" width="240">
          <template slot-scope="scope">
            <div v-if="scope.$index % 2 == 0">
              <span
                class="combineName"
                v-for="(skuAttr, skuAttrIndex) in scope.row.skuAttrList"
                :key="skuAttrIndex"
              >
                <el-tag>{{ skuAttr.attrName }}</el-tag>
                {{ skuAttr.attrValue }}
              </span>
            </div>
            <div v-if="scope.$index % 2 != 0">
              <!-- 图片列表及活动设置 -->
              <div class="otherBox">
                <el-collapse>
                  <el-collapse-item title="图片列表及活动信息">
                    <SpuUpload
                      :previewMode="true"
                      :imageList="scope.row.skuImageList"
                    />
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品标题">
          <template slot-scope="scope">
            <el-input
              disabled
              v-model="skuForm.skuList[scope.$index].title"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="商品价格" width="150">
          <template slot-scope="scope">
            <el-input disabled v-model="skuForm.skuList[scope.$index].price">
              <template slot="append">元</template>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="商品库存" width="100">
          <template slot-scope="scope">
            <el-input
              disabled
              v-model="skuForm.skuList[scope.$index].stockNum"
            ></el-input>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <!-- 描述信息 -->
    <el-divider
      v-if="descForm.images && descForm.images.length > 0"
      content-position="left"
      class="divider"
      >描述信息</el-divider
    >
    <div class="descBox">
      <div class="image" v-for="(image, index) in descForm.images" :key="index">
        <el-image :src="image.url" fit="fill"></el-image>
      </div>
    </div>
  </div>
</template>

<script>
import productFormMixins from "@/views/base/productForm";
import SpuUpload from "./components/spuUpload.vue";

export default {
  name: "spuPreviewBox",
  mixins: [productFormMixins],
  components: {
    SpuUpload,
  },
  data() {
    return {
      init: {},
      data: {},
      // 基本信息
      baseForm: {
        name: "",
        title: "",
        categoryName: "",
      },
      // 图片信息
      imageForm: {
        data: [],
      },
      // 描述信息
      descForm: {
        content: "",
      },
      // 规格参数
      attrForm: {
        groupAttrs: [],
      },
      // sku数据
      skuForm: {
        hasSaleAttrs: false,
        skuList: [
          {
            title: "",
            price: null,
            stockNum: null,
          },
        ],
      },
    };
  },
  methods: {
    // 初始化数据
    initData(data) {
      if (data) {
        this.baseForm = data.baseForm;
        this.imageForm = data.imageForm;
        this.descForm = data.descForm;
        this.attrForm = data.attrForm;
        this.skuForm = data.skuForm;
      }
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 != 0) {
        if (columnIndex === 0) {
          return [1, 4];
        } else if (columnIndex > 0) {
          return [0, 0];
        }
      }
    },
    // 修改样式
    tableCellClassName(cel) {
      if (cel.rowIndex % 2 != 0) {
        return "customRow";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.preview {
  overflow: auto;
  height: 60vh;
  padding-right: 20px;
  .combineName {
    display: block;
    margin-bottom: 5px;
    margin-right: 20px;
    .el-tag {
      margin-right: 5px;
    }
  }
  .combineSingleName {
    .el-tag {
      margin-right: 5px;
    }
  }
  .divider {
    margin: 50px 0px 30px 0px;
    background-color: #409eff;
    .el-divider__text {
      color: #409eff;
      font-weight: bold;
    }
  }
  .baseBox {
    border: 1px solid #efefef;
    padding: 30px 20px 10px 10px;
  }
  .imageBox {
    display: block;
  }
  .descBox {
    width: 751px;
    border: 1px solid #eee;
    padding-left: 10px;
    .image {
      position: relative;
      border: 1px solid #fff;
      .el-image {
        width: 750px;
      }
    }
  }
  .attrBox {
    border-collapse: collapse;
    width: 70%;
    .group {
      width: 80px;
      text-align: center;
    }
    td {
      margin: 0;
      border: 1px solid #efefef;
      padding: 10px 20px;
    }
  }
  .skuBox {
    margin-top: 20px;
    .otherBox {
      :deep(.el-collapse) {
        border: none;
      }
      :deep(.el-collapse-item__header) {
        justify-content: flex-end;
        border-bottom: none;
        .el-collapse-item__arrow {
          margin: 0px 0px 0px 10px;
        }
      }
      :deep(.el-collapse-item__wrap) {
        border-bottom: none;
      }
    }
    :deep(.customRow) {
      padding: 0;
      .cell {
        padding: 0;
        .el-collapse-item__header {
          padding: 0px 10px;
        }
        .el-collapse-item__wrap {
          padding: 0px 10px;
        }
      }
    }
  }
}
</style>